<template>
	<view class="container bg-grey">
		<sb-back-icon />
		<sb-empty v-if="!goodsInfo.name" />
		<template v-else>
			<view class="bg-white">
				<u-swiper :list="banners" height="600" @click="preview"></u-swiper>
				<view class="pad30">
					<view class="font30 b-word bold"> {{ goodsInfo.name }} </view>
					<view class="font26 u-line-2 c-d"> {{ goodsInfo.subTitle }} </view>
					<view class="flex marv20 j-s a-c">
						<sb-price-text :sub='false' :price='goodsInfo.price' />
						<view class="font24 c-d padh10">
							{{ goodsInfo.virtualSaleCount || 0 }} Saled
						</view>
					</view>
					<view class="flex marv20 j-s" @click="showSKU('select')">
						<view class="flex">
							<view class="">Goods Spec </view>
						</view>
						<view class="flex">
							<view class="c-d padh10">{{ currentGood.skuSpec || "Select Spec" }}</view>
							<view class="">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<navigator class="c-d flex a-c">view similarity in
						<view class="underline padh10"> {{goodsInfo.category}} </view>
					</navigator>
				</view>
			</view>
			<view class="bg-white marv20 pad20">
				<sb-tip :showRight="false">Goods Detail</sb-tip>
				<sb-line />
				<view class="flex j-c pad10">
					<u-parse :html="goodsInfo.detail" />
				</view>
			</view>
			<view style="height: 120rpx"></view>
			<view class="footer bg-white flex pad20 j-s">
				<view class="flex">
					<navigator open-type="switchTab" class="flex-col j-c a-c flex" url="/pages/main/tabbar/index/index">
						<u-icon name="home" color="black" size="50"></u-icon>
					</navigator>
					<view class="marh40 flex flex-col j-c a-c" @click="$refs.serviceModal.show()">
						<u-icon name="kefu-ermai" color="black" size="50"></u-icon>
					</view>
					<navigator open-type="switchTab" class="flex-col j-c a-c flex" url="/pages/main/tabbar/cart/cart">
						<u-icon name="shopping-cart" color="black" size="50"></u-icon>
					</navigator>
				</view>
				<view class="flex ">
					<view @click="showSKU('add')" class="cart flex flex-col j-c  marh20">
						Add To Cart
					</view>
					<view @click="showSKU('buy')" class="buy flex flex-col j-c ">
						Buy Now
					</view>
				</view>
			</view>

		</template>
		<sku-popup ref="skuPopup" :skus="goodsInfo.sku" v-if='goodsInfo.sku' @change="refreshSku" @submit="submit">
		</sku-popup>
		<u-toast ref="uToast" />
		<service-modal ref="serviceModal" />
	</view>
</template>
<script>
	import { mapMutations } from "vuex";
	import skuPopup from "./modules/sku-popup.vue";
	export default {
		components: { "sku-popup": skuPopup },
		onLoad({ id = 12 }) {
			if (!id) {
				return this.$msg("invalid params", () => {
					this.$go2("./pages/main/tabbar/index/index");
				});
			}
			this.id = id;
			this.getGoodsDetail();
		},
		data() {
			return {
				type: "info",
				cata_id: 0,
				banners: [],
				//outIndex: [], //缺货的index
				selectedItem: {},
				clickItem: 0,
				allCmbty: "",

				id: 0,
				goodsInfo: {},
				submitType: "",
				content: ``,
				currentGood: {},
				skuSpeclist: [],
			};
		},
		methods: {
			...mapMutations(["SET_ORDER_INFO"]),
			async submit(goodsInfo) {
				if (!this.$checkLogin()) return this.$redirect2Login();
				switch (this.submitType) {
					case "add":
						try {
							let { success } = await this.$postB("/cart/add", {
								skuId: goodsInfo.id,
								count: goodsInfo.count,
							});
							if (success) {
								this.$refs.uToast.show({
									title: "success",
								});
								this.$refs.skuPopup.hide();
							}
						} catch (e) {
							this.$refs.uToast.show({
								title: "fail",
								type: "error",
							});
						}

						break;
					case "buy":
						const orderInfo = { ...this.goodsInfo };
						orderInfo.sku = { ...this.currentGood };
						orderInfo.price =
							Number(orderInfo.sku.salePrice) * Number(orderInfo.sku.count);
						this.goodsInfo.skuSpec = this.currentGood.skuSpec;
						this.SET_ORDER_INFO([orderInfo]);
						this.$go2("/pages/main/order/detail");
						// /pages/main/order/detail
						break;
					case "select":
						this.$refs.skuPopup.hide();
						break;
				}
			},
			async getGoodsDetail() {
				let { success, data } = await this.$get("/goods/clientDetail", {
					id: this.id,
				});
				if (!success) return this.$msg("No Data")
				this.goodsInfo = data
				// 如果没有轮播图，则把封面图当成轮播图
				if (!this.banners.length)
					this.banners = [data.cover]
				// 设置页面标题
				this.$setTitle(data.name)
				this.$nextTick(() => {
					this.$refs.skuPopup.show();
				})
			},
			preview(index) {
				uni.previewImage({
					urls: this.imgs,
					loop: true,
					current: index,
					indicator: "number",
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			showSKU(type) {
				this.submitType = type;
				this.$refs.skuPopup.show();
			},
			refreshSku({ currentGood, skuSpeclist }) {
				this.currentGood = currentGood;
				this.skuSpeclist = skuSpeclist;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 -1rpx 2rpx #ccc;

		.cart {
			border: 1px solid #ccc;
			width: 200rpx;
			text-align: center;
			border-radius: 10rpx;
		}

		.buy {
			background: $main-color;
			;
			width: 200rpx;
			text-align: center;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.pharce {
		overflow: hidden;
		bottom: 0;
		position: absolute;
		width: 710rpx;
		margin-bottom: 10rpx;
	}

	.empty {
		height: 600rpx;
	}
</style>
